<wide-header-page title="{{ tx.details.title }}" hideBackButton="true">
  <ion-buttons left>
    <button class="close-container disable-hover" (click)="close()" ion-button>
      <ion-icon ios="md-close" md="md-close"></ion-icon>
    </button>
  </ion-buttons>
  <div page-content>
    <div class="coinbase-subtitle">{{ tx.details.subtitle }}</div>
    <ion-list class="bp-list">
      <ion-item>
        <div class="header-container">
          <div class="amount-label">
            <div class="coinbase-amount">
              {{tx.amount.amount | number:'1.2-8'}}
              <span class="coinbase-coin">
                {{tx.amount.currency}}
              </span>
            </div>
            <div class="alternative">
              {{tx.native_amount.amount | number:'1.2-2'}} {{tx.native_amount.currency}}
            </div>
          </div>
        </div>
      </ion-item>

      <ion-item class="sub-title">
        <ion-label>
          <div class="main-label" translate>DETAILS</div>
        </ion-label>
      </ion-item>

      <ion-item *ngIf="tx.to && tx.to.address">
        <ion-label>
          <div class="summary-item">
            <span translate>To</span>
          </div>
        </ion-label>
        <ion-note copy-to-clipboard="{{ tx.to.address }}" item-end>
          <div class="payment-proposal-to">
            <img class="coin-img" src="assets/img/currencies/{{ tx.amount.currency.toLowerCase() }}.svg" alt="Coin" />
            <span class="note-container ellipsis summary-item-detail">{{ tx.to.address }}</span>
          </div>
        </ion-note>
      </ion-item>

      <ion-item *ngIf="tx.description">
        <ion-label>
          <div class="summary-item">
            <span translate>Notes</span>
          </div>
        </ion-label>
        <ion-note item-end>
          <span class="note-container ellipsis summary-item-detail">{{tx.description}}</span>
        </ion-note>
      </ion-item>

      <div *ngIf="tx.network && tx.network != 'off_blockchain'">
        <ion-item *ngIf="tx.network.confirmations">
          <ion-label>
            <div class="summary-item">
              <span translate>Confirmations</span>
            </div>
          </ion-label>
          <ion-note item-end>
            <span class="note-container ellipsis summary-item-detail">
              {{ tx.network.confirmations > 6 ? '+6' : tx.network.confirmations }}
            </span>
          </ion-note>
        </ion-item>
        <ion-item *ngIf="tx.network.transaction_fee">
          <ion-label>
            <div class="summary-item">
              <span translate>Fee</span>
            </div>
          </ion-label>
          <ion-note item-end>
            <span class="note-container ellipsis summary-item-detail">
              {{ tx.network.transaction_fee.amount | number:'1.2-8' }} {{ tx.network.transaction_fee.currency }}
            </span>
          </ion-note>
        </ion-item>
        <ion-item *ngIf="tx.network.hash">
          <ion-label>
            <div class="summary-item">
              <span translate>Transaction ID</span>
            </div>
          </ion-label>
          <ion-note copy-to-clipboard="{{ tx.network.hash }}" item-end>
            <span class="note-container ellipsis summary-item-detail">{{ tx.network.hash }}</span>
          </ion-note>
        </ion-item>
      </div>

      <div class="line-divider"></div>

      <ion-item>
        <ion-label>
          <div class="summary-item">
            <span>{{ tx.created_at | date:'medium' }}</span>
          </div>
        </ion-label>
        <ion-note item-end>
          <span class="note-container ellipsis summary-item-detail">{{tx.status}}</span>
        </ion-note>
      </ion-item>

      <ion-row *ngIf="tx.network && tx.network.hash" justify-content-center class="background-button-content">
        <div class="background-content">
          <button ion-button clear (click)="viewOnBlockchain()">
            {{'View on blockchain' | translate}}
          </button>
        </div>
      </ion-row>

    </ion-list>

  </div>
</wide-header-page>
